<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container" style="border: 1px solid #000000; height: 600px; width: 70%;">
    <div class="row" style="height: 60px; background-color: black;">
        <div class="col-md-12" style="height: 45px;">
            <img src="image/xytx.png" alt="" width="60px" height="100%" style="background-color: white"/>
            <span class="" style="font-size:19px; color: white;line-height: 60px;margin-left: 15px;"> 智能聊天机器人</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="text-center" style="background-color: blueviolet;
								height: 45px;
								line-height: 45px; 
								color: white;
								font-size: 20px;">聊天窗口
            </div>
            <div class="" style="background-color: aliceblue;">
                <!-- pre-scrollable -->
                <ul class="pre-scrollable list-unstyled" id="chatwindow" style="height: 1000px;  ">
                    <li class="text-right">
                        <div style="font-size: 15px; font-family: '楷体',serif;">
                            <b>欣欣相印</b>
                            <span style="letter-spacing: -1px; color: #4cae4c">
                                2021/12/17 下午7:35:04
                            </span>
                        </div>
                        <span style="background-color: beige;  letter-spacing: 1px;
                        border: 1px solid red;display: inline-block; height: 30px;line-height: 30px;border-radius: 10px;margin-top: 7px; padding: 0 10px ">?</span>
                        <img src="image/xytx.png" width="35px" height="35px" alt="">
                    </li>
                    <li>
                        <div style="font-size: 15px; font-family: '楷体',serif;">
                            <b>客服一号 </b>
                            <span style="letter-spacing: -1px; color: #4cae4c">
                                2021/12/17 下午7:35:05
                            </span>
                        </div>
                        <img class="col-md-1" src="image/jiqiren.webp" style="vertical-align: center;margin: auto 0;"
                             width="35px"
                             height="35px" alt="">
                        <div class="col-md-11">
                               <span style="background-color: beige;  letter-spacing: 1px;
                        border: 1px solid red;display: inline-block; min-width: 160px; line-height: 30px;border-radius: 10px;margin-top: 7px;padding: 0 10px ">
                            有个年老的农夫一直住在乡下，从来没进过城，他 </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10" style="">
            <div>
                <input class="col-md-11" id="inputText" type="text"
                       style="list-style-type: none;outline: none;height: 40px; ">
                <button class="col-md-1 btn-primary" id="submit" style="height: 40px;">发送</button>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#submit").on("click", function () {
            var inputText = $("#inputText").val();
            if (inputText.length === 0) {
                alert("输入内容不能为空")
                return
            }
            var li_appens = "<li class=\"text-right\"><div style=\"font-size: 15px; font-family: '楷体',serif;\"><b>欣欣相印</b><span style=\"letter-spacing: -1px; color: #4cae4c\">" + new Date().toLocaleString() + "</span></div><span style=\"background-color: beige;  letter-spacing: 1px; border: 1px solid red;display: inline-block; height: 30px;line-height: 30px;border-radius: 10px;margin-top: 7px;padding: 0 10px \">" + inputText + "</span><img src=\"image/xytx.png\"width=\"35px\"height=\"35px\"alt=\"\"></li>"
            $("#chatwindow").append(li_appens);
            $("#inputText").val("");

            //调用接口
            $.ajax({
                method: 'POST',
                url: "sent/chat",
                dataType: 'JSON',
                data: {
                    "inputText": inputText
                },
                success: function (result) {
                    let eval1 = eval(result);
                    var text = "";
                    for (var i = 0; i < eval1.length; i++) {
                        console.log()
                        text += eval1[i].text + "\n"
                        var kefus = "<li><div style=\"font-size: 15px; font-family: '楷体',serif;\"><b>客服一号</b><span style=\"letter-spacing: -1px; color: #4cae4c\">" + new Date().toLocaleString() + "</span></div><img class=\"col-md-1\"src=\"image/jiqiren.webp\"style=\"vertical-align: center;margin: auto 0;\"width=\"35px\"height=\"35px\"alt=\"\"><div class=\"col-md-11\"><span style=\"background-color: beige;  letter-spacing: 1px; border: 1px solid red;display: inline-block; min-width: 160px; line-height: 30px;border-radius: 10px;margin-top: 7px;padding: 0 10px \">" + text + "</span></div></li>";
                        $("#chatwindow").append(kefus);
                    }
                }
            });
        })
    })
</script>
</html>
